window.onload = function (){

    let uName = document.getElementById("uname");
    let password = document.getElementById("pwd");
    let submit = document.getElementById("sub");
    let form = document.getElementById("form");
    let msgs = document.getElementsByClassName("msg");
    var uNamePattern = /^[a-zA-Z0-9\s]{3,15}$/;
    var passwordPattern = /^[a-zA-Z0-9]{8,16}$/;
    submit.onclick = function () {
        var flag1 = false;
        var flag2 = false;
        if(uNamePattern.test(uName.value)){
            uName.setAttribute("style","border: 1px green solid");
            msgs[0].setAttribute("style","visibility: hidden");
            flag1 = true;
        }
        else{
            uName.setAttribute("style","border: 1px red solid");
            msgs[0].setAttribute("style","visibility: visible");
        }
        if(passwordPattern.test(password.value)){
            password.setAttribute("style","border: 1px green solid");
            msgs[1].setAttribute("style","visibility: hidden");
            flag2 = true;
        }
        else{
            password.setAttribute("style","border: 1px red solid");
            msgs[1].setAttribute("style","visibility: visible");
        }

        if(flag1 && flag2) {
            password.value = md5(password.value,"nicer");
            form.submit();
        }
        else{
            return false;
        }

    };






}